<template>
   <div class="main">
     <div class="main-1"> 
          <div class="msgbox">

            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-laba"></use>
            </svg>

            <span class="msg">公告：</span>
          </div>
         <div class="gonggao">
             <transition-group tag="ul"  name="uls" enter-active-class="animated fadeInUpBig" leave-active-class="animated fadeOut" mode="out-in">
               <li @mouseover="mouseover" @mouseout="mouseout" v-for="(item,index) in newbox1" :key="index" v-show="index===num" v-if="index <= 2"><i></i><nuxt-link :to="'/post/' + item.pid">{{item.name}}</nuxt-link></li>
            </transition-group>
             <transition-group tag="ul"  name="uls" enter-active-class="animated fadeInUpBig" leave-active-class="animated fadeOut" >
               <li @mouseover="mouseover" @mouseout="mouseout" v-for="(item,index) in newbox1" :key="index" v-show="index===num + 3" v-if="index > 2 && index < 6"><i></i><nuxt-link :to="'/post/' + item.pid">{{item.name}}</nuxt-link></li>
             </transition-group>
             <transition-group tag="ul"  name="uls" enter-active-class="animated fadeInUpBig" leave-active-class="animated fadeOut" >
               <li @mouseover="mouseover" @mouseout="mouseout" v-for="(item,index) in newbox1" :key="index" v-show="index===num + 6" v-if="index >= 6 && index <= 8"><i></i><nuxt-link :to="'/post/' + item.pid">{{item.name}}</nuxt-link></li>
            </transition-group>
         </div>
    
     </div>
      <div class="content">

          <nuxt-link to="/product/30" class="animated fadeInLeft">
              <div class="card">
                <img src="http://p6dwecco6.bkt.clouddn.com/img/index-1.png" alt="">
              </div>
              <div class="msgtitle">
                <p>股权时代来临</p>
                <p>如何选中下一个独角兽？</p>
              </div>
          </nuxt-link>
  



            <nuxt-link to="/product/38" class="animated fadeInUp">
              <div class="card">
                <img src="http://p6dwecco6.bkt.clouddn.com/img/index-2.png" alt="">
               </div>
               <div class="msgtitle">
                 <p>政策红利持续释放</p>
                 <p>开启25万亿掘金时代</p>
               </div>
            </nuxt-link>
     
            <nuxt-link to="/product/18" class="animated fadeInUp">
                  <div class="card">
                  <img src="http://p6dwecco6.bkt.clouddn.com/img/index-3.png" alt="">
                </div>
                <div class="msgtitle">
                  <p>明星研究团队</p>
                  <p>十年深入研究</p>
                </div>
            </nuxt-link>
            
            <nuxt-link to="/product/33" class="animated fadeInRightBig">
                <div class="card">
                 <img src="http://p6dwecco6.bkt.clouddn.com/img/index-4.png" alt="">
                </div>
                <div class="msgtitle">
                  <p>发现未来</p>
                  <p>洞察市场波动</p>
                </div>
             </nuxt-link>
      </div>
   </div>
</template>
<script>
var donghua;
export default {
  props: {
    newbox1: {
      type: Array,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      num: 0
    };
  },
  methods: {
    play() {
      this.num++;
      if (this.num == 3) {
        this.num = 0;
      }
    },
    playauto() {
      donghua = setInterval(this.play, 5000);
    },
    mouseover() {
      clearInterval(donghua);
    },
    mouseout() {
      clearInterval(donghua);
      this.playauto();
    }
  },
  created() {
    this.playauto();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.msgtitle {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
  color: white;
}
.msgtitle p {
  font-size: 16px;
  line-height: 26px;
  text-align: center;
  transition: all 0.5s;
}
.msgtitle p:nth-child(1) {
  margin-top: 40px;
}
.main-1 {
  overflow: hidden;
}
.msgbox {
  float: left;
  height: 30px;
  line-height: 30px;
}
.msg {
  margin-left: 10px;
  font-size: 16px;
  color: #cd9c54;
  display: inline-block;
  vertical-align: middle;
}
.icon {
  display: inline-block;
  font-size: 32px;
  vertical-align: middle;
  color: #cd9c54;
  -webkit-animation: ripple .5s infinite ease-in-out;
  animation: ripple .5s infinite ease-in-out;
}
.gonggao ul {
  height: 20px;
  overflow: hidden;
}
.gonggao ul li {
  width: 250px;
  overflow: hidden;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #333;
}
.gonggao ul li:hover {
  color: #cd9c54;
}
.gonggao ul li i {
  height: 6px;
  width: 6px;
  background: #333;
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: 6px;
}
.gonggao {
  margin: 6px 0 20px 120px;
  display: flex;
  justify-content: space-between;
}
.main {
  width: 1200px;
  margin: 20px auto;
}
.content {
  text-align: center;
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.content a {
  width: 287px;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.content a:hover p {
  font-size: 18px;
}
.content a:hover img {
  transform: scale(1.4);
}
.content img {
  width: 100%;
  height: 140px;
  transition: all 0.5s;
}
@-webkit-keyframes ripple {
  0% {
    opacity: 0.35;
    
  }
  100% {
    opacity: 1;
   
  }
}
@keyframes ripple {
  0% {
    opacity: 0.35;
   
  }
  100% {
    opacity: 1;
  
  }
}
</style>
